<template>
  <el-row :gutter="20" class="m-t-5px">
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">客单价</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{ itemData.customerUnitPrice }}万</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">环比</span>
          <span
            ><span class="text">{{
              itemData.customerUnitPriceChain + "%"
            }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <chartDataI :echartDataSku="customerUnitPriceTrendList" />

      <!-- <div id="echartsAll" style="width: 250px; height: 170px"></div> -->
    </el-col>
    <!-- <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <div id="KoiCardII" style="width: 250px; height: 170px"></div>
    </el-col> -->
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">老客客单价</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.oldCustomerUnitPrice
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">环比</span>
          <span
            ><span class="text">{{
              itemData.oldCustomerUnitPriceChain + "%"
            }}</span></span
          >
        </div>
      </el-card>
    </el-col>
    <el-col :span="6" :lg="4" :md="12" :sm="12" :xs="24">
      <el-card class="rounded-md dark:bg-black" shadow="hover">
        <div class="flex justify-between">
          <span class="card-panel-text">新客客单价</span>
          <!-- <el-tag
            :type="
              index == 0
                ? 'primary'
                : index == 1
                ? 'success'
                : index == 2
                ? 'warning'
                : 'danger'
            "
            >{{ item.unit }}</el-tag
          > -->
        </div>
        <div class="text-2xl">
          <!-- <CountTo
            :startVal="0"
            :endVal="item.value1"
            :duration="2000"
          ></CountTo> -->
          <span class="card-panel-num">{{
            itemData.newCustomerUnitPrice ? itemData.newCustomerUnitPrice : " "
          }}</span>
        </div>
        <el-divider direction="horizontal" content-position="left"></el-divider>
        <div class="flex justify-between">
          <span class="text">环比</span>
          <span
            ><span class="text">{{
              itemData.newCustomerUnitPriceChain + "%"
            }}</span></span
          >
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script >
import chartDataI from "./chartDataI.vue";
import * as echarts from "echarts/lib/echarts.js";
import {
  listPurchaseBasicsDwd,
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectOverdueQuantity,
} from "@/api/purchase/PurchaseBasicsDwd";
import MergeTable from "@/views/purchase/common/MergeTable.vue";
// @ts-ignore
import CountTo from "vue-count-to";
// import { reactive } from "vue";
export default {
  components: {
    // PanelGroup,
    CountTo,
    MergeTable,
    chartDataI,
    // KoiCard,
  },
  props: {
    biNumberItem: {
      type: Array,
      default: () => [],
    },
    itemData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      customerUnitPriceTrendList: {},
      query: {},
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      PurchaseBasicsDwdList: [],
      PurchaseBasicsDwdTotal: 0,
      isOpen: false,
      cardList: [
        {
          title1: "上月支付订单",
          unit: "月",
          value1: 6600,
          title2: "总订单数量",
          value2: 7000,
        },
        {
          title1: "上月退款订单",
          unit: "月",
          value1: 400,
          title2: "退款金额",
          value2: 8000,
        },
        {
          title1: "上月利润",
          unit: "月",
          value1: 66000,
          title2: "盈利",
          value2: 6666,
        },
        {
          title1: "上月新增用户",
          unit: "月",
          value1: 66,
          title2: "上月登录用户",
          value2: 300,
        },
      ],
    };
  },
  watch: {
    itemData: {
      handler: function (newnew, oldold) {
        if (JSON.stringify(newnew) != "{}") {
          const obj = Object.entries(this.itemData.customerUnitPriceTrend);

          this.customerUnitPriceTrendList = {
            columns: [],
            rows: [],
          };
          this.customerUnitPriceTrendList.columns.push("渠道", "客单价");
          for (let [key, value] of obj) {
            console.log(key, value); // 打印键和值
            this.customerUnitPriceTrendList.rows.push({
              渠道: key,
              客单价: value,
            });
            // option.xAxis[0].data.push(key);
            // option.series[0].data.push(value ? value : 0);
          }
          // this.init();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    init() {
      console.log(JSON.stringify(this.itemData));
      var option = {
        title: {
          // text: "库存价值占比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "1%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },

        // legend: {
        //   data: ["库存数量"],
        // },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLabel: {
              show: false, // 确保标签显示
              // interval: 0, //代表显示所有x轴标签显示
              // rotate: 45, //代表逆时针旋转45度
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: false, // 确保标签显示
            },
          },
        ],
        series: [
          {
            name: "客单价",
            type: "line", // 指定为折线图
            // areaStyle: {}, // 开启面积图
            data: [],
          },
        ],
      };

      // 从 JSON 数据中提取库存数量，并填充到 series.data 中
      const entries = Object.entries(this.itemData.customerUnitPriceTrend);

      for (let [key, value] of entries) {
        console.log(key, value); // 打印键和值
        option.xAxis[0].data.push(key);
        option.series[0].data.push(value ? value : 0);
      }

      // 使用刚指定的配置项和数据显示图表。
      //   myChart.setOption(option);
      var myChartDom = document.getElementById("KoiCardII");

      // 检查是否已经存在ECharts实例
      if (echarts.getInstanceByDom(myChartDom)) {
        // 如果存在，销毁它
        echarts.getInstanceByDom(myChartDom).dispose();
      }

      // 初始化新的ECharts实例
      var myChart = echarts.init(myChartDom);

      // Raddar.setOption(option);
      myChart.setOption(option);
    },
    handlePurchaseExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/selectOverdueQuantityExport",
        {
          ...this.query,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },
    pageList() {
      this.query = {
        ...this.query,
        ...this.pageReq,
      };
      selectOverdueQuantity(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
    },
    handleSetLineChartData(type) {
      // if (!type) {
      //   this.$modal.msgError("请选择一条数据");
      //   return;
      // }
      this.query = {
        // skc: this.itemData.skc,
        // colorProperty: this.itemData.colorProperty,
        supplier: this.itemData.supplier,
        brand: this.itemData.brand,
        oneYear: this.itemData.oneYear,
        label: type,
        ...this.pageReq,
      };

      selectOverdueQuantity(this.query).then((response) => {
        this.PurchaseBasicsDwdList = response.rows;
        this.PurchaseBasicsDwdTotal = response.total;
      });
      this.isOpen = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
.card-panel-text {
  line-height: 18px;
  // color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
  margin-bottom: 12px;
}

.card-panel-num {
  font-size: 20px;
  font-weight: 600;
}
.text {
  // color: rgba(0, 0, 0, 0.45);
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
